@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    overflow-y: overlay;
  }

  body {
    @apply bg-slate-900 text-xs text-slate-200 lg:text-base;
  }

  .text-xxs {
    font-size: 0.625rem;
    line-height: 0.75rem;
  }

  .initial {
    font-size: initial;
  }
}

@layer components {
  .btn {
    @apply rounded py-1 px-2 font-bold disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-border {
    @apply border-slate-500 hover:border-slate-600 disabled:border-slate-800;
  }

  .btn-r {
    @apply btn-border rounded-r-full border-r;
  }

  .btn-l {
    @apply btn-border rounded-l-full border-l;
  }

  .btn-slate {
    @apply bg-slate-500 text-white;
  }

  .btn-slate:hover {
    @apply bg-slate-600;
  }

  .btn-slate:disabled {
    @apply bg-slate-800;
  }

  .btn-responsive {
    @apply text-[0px] md:text-xs lg:text-base;
  }

  .particle-list {
    @apply mb-1 h-[70vh] w-full rounded border-slate-800 bg-slate-800 text-xs focus:border-solid focus:border-slate-200 focus:ring-0 disabled:bg-slate-800 md:mb-4 lg:text-base;
  }

  .particle-list:focus + .btn-r {
    @apply border-r border-slate-200;
  }

  .particle-list:focus + .btn-l {
    @apply border-l border-slate-200;
  }

  .particle-list-scrollbar::-webkit-scrollbar-track {
    @apply rounded-full bg-slate-800;
  }

  .filter-button {
    @apply ml-auto mr-auto mb-1 w-3/4 border-slate-800 bg-slate-800 text-xs placeholder-slate-100 focus:border-slate-200 focus:ring-0 md:mb-4 lg:text-base;
  }

  .checkbox-focus {
    @apply focus:ring-slate-500 focus:ring-offset-0;
  }

  .modal-transition {
    transition: opacity 0.5s ease;
  }

  .modal-container-transition {
    transition: opacity 0.5s ease;
    backdrop-filter: brightness(35%) blur(5px);
  }

  .text-loader {
    animation: pulse 0.9s ease-in-out infinite alternate;
  }

  @keyframes pulse {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
}

@layer utilities {
  :root {
    --toastify-color-dark: #334155 !important;
  }

  /* styled scrollbar */
  ::-webkit-scrollbar {
    width: 0.5rem;
  }

  ::-webkit-scrollbar-track {
    @apply rounded-full bg-slate-700;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-slate-400;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-200;
  }

  /* hide scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-gutter-enable {
    scrollbar-gutter: stable both-edges;
  }
}
